<template>
  <m-popover ref="popover" :ok-text="item && item.name ? $t('Edit') : $t('Submit')" @ok="_ok" @close="close">
    <template slot="content">
      <div style="padding:0 20px;">
        <el-form ref="myform" :model="form" :rules="rules" size="mini" label-position="right" label-width="100px">
          <el-form-item label="路由名称" prop="name">
            <el-input type="input" v-model.trim="form.name" maxlength="60" size="mini" placeholder="请输入路由名称">
            </el-input>
          </el-form-item>
          <el-form-item label="外部网络" prop="network">
            <el-select v-model.trim="form.network" placeholder="请选择" clearable>
              <el-option value="wan/internet">wan/internet</el-option>
              <el-option value="wan mpls">wan mpls</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="API地址" prop="apiAddress">
            <el-input v-model.trim="form.apiAddress" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="目地地址">
            <el-input placeholder="请输入" v-model.trim="form.address"></el-input>
          </el-form-item>
          <el-form-item label="掩码">
            <el-input placeholder="请输入" v-model.trim="form.mask"></el-input>
          </el-form-item>
          <el-form-item label="默认网关">
            <el-input placeholder="请输入" v-model.trim="form.gateway"></el-input>
          </el-form-item>
          <el-form-item label="出接口">
            <el-input placeholder="请输入" v-model.trim="form.outInterface"></el-input>
          </el-form-item>
          <el-form-item label="IP地址">
            <el-input placeholder="请输入" v-model.trim="form.ipAddress"></el-input>
          </el-form-item>
          <el-form-item label="带宽">
            <el-input placeholder="请输入" v-model.trim="form.bandWidth"></el-input>
          </el-form-item>
          <el-form-item label="上行速率">
            <el-input placeholder="请输入" v-model.trim="form.upVelocity"></el-input>
          </el-form-item>
          <el-form-item label="下行速率">
            <el-input placeholder="请输入" v-model.trim="form.downVelocity"></el-input>
          </el-form-item>
          <el-form-item label="上行限速">
            <el-input placeholder="请输入" v-model.trim="form.upLink"></el-input>
          </el-form-item>
          <el-form-item label="下行限速">
            <el-input placeholder="请输入" v-model.trim="form.downLink"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </m-popover>
</template>
<script>
  import store from '@/conf/home/store'
  import mPopover from '@/module/components/popup/popover'

  export default {
    name: 'create-route',
    data () {
      return {
        store,
        form: {},
        rules: {
          name: [{ required: true, message: '请输入路由名称', trigger: 'blur' }],
          network: [{ required: true, message: '请选择外部网络', trigger: ['blur', 'change'] }],
          apiAddress: [{ required: true, message: '请输入API地址', trigger: 'blur' }]
        }
      }
    },
    props: {
      item: Object
    },
    methods: {

      async _ok () {
        if (!await this._verification()) {
          return
        }

        let $then = (res) => {
          this.$emit('onUpdate')
          this.$message.success(res.msg)
          this.$refs.popover.spinnerLoading = false
        }

        let $catch = (e) => {
          this.$message.error(e.msg || '')
          this.$refs.popover.spinnerLoading = false
        }

        if (this.item && this.item.id) {
          this.$refs.popover.spinnerLoading = true
          this.store.dispatch('router/updateRoute', this.form).then(res => {
            $then(res)
          }).catch(e => {
            $catch(e)
          })
        } else {
          this.$refs.popover.spinnerLoading = true
          this.store.dispatch('router/createRoute', this.form).then(res => {
            $then(res)
          }).catch(e => {
            $catch(e)
          })
        }
      },
      _verification () {
        return new Promise((resolve, reject) => {
          this.$refs.myform.validate(valid => {
            resolve(!!valid)
          })
        })
      },
      close () {
        this.$emit('close')
        setTimeout(() => {
          this.$refs.myform.resetFields()
          this.$refs.myform.clearValidate()
        }, 800)
      }
    },
    watch: {
      item: {
        handler (val, oldVal) {

        },
        deep: true
      }
    },
    created () {
      if (this.item) {
        this.form = Object.assign({}, this.form, this.item)
      }
    },
    mounted () {
    },
    components: { mPopover }
  }
</script>
